<template>
	<div>
		<div class="loan_nav col_nav">
			<ul>
				<!-- <li><a href="javascript:history.go(-1)"><i class="iconfont">&#xe61e;</i></a></li> -->
				<li></li>
				<li>
					<p>贷款</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div class="N_nav">
			<ul>
				<li>
					<router-link to="loanapplication">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-n-1"></use>
						</svg>
						<p>我要贷款</p>
						<!-- <p>1小时到账</p> -->
					</router-link>
				</li>
				<li>
					<router-link to="stewardship">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-n-"></use>
						</svg>
						<p>信用卡</p>
						<!-- <p>额度高  权益多</p> -->
					</router-link>
				</li>
				<li>
					<router-link to="recommending">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-fenxiang-1"></use>
						</svg>
						<p>分享</p>
						<!-- <p>分享有豪礼</p> -->
					</router-link>
				</li>
			</ul>
		</div>
		<div class="N_line">

		</div>
		<div class="N_produce">
			<div class="Nt_produce">
				<ul>
					<li>
						<i class="iconfont col-r1">&#xe9aa;</i>
					</li>
					<li>
						<p>
							热门贷款
						</p>
					</li>
					<li>
						<router-link to="loanproducts">
							<p>更多</p>
						</router-link>
					</li>
					<li>
						<i class="iconfont">&#xe690;</i>
					</li>
				</ul>
			</div>
			<div v-for="loansInfo in products" :key="loansInfo.loansInfoId">
				<ul class="Nl_produce">
					<li>
						<img :src="loansInfo.mainImg" alt="产品图片" width="100%;">
					</li>
					<li>
						<ul>
							<li>
								<p>{{loansInfo.loansName}}</p>
							</li>
							<li>
								<p v-html="loansInfo.intro">
									<!-- {{loansInfo.intro}} -->
								</p>
							</li>
							<li>
								<span>{{changeType(loansInfo.loansType)}}</span>
							</li>
						</ul>
					</li>
					<li>
						<router-link :to="`apply/${loansInfo.loansInfoId}`">
							<input type="button" value="立即申请">
						</router-link>
					</li>
				</ul>
			</div>

		</div>
		<div class="N_line">

		</div>
		<swiper :list="baseList" :show-dots="false" loop auto :aspect-ratio="0.3" dots-position="center" dots-class="custom-bottom"></swiper>
		<div class="N_line">

		</div>
		<div class="N_produce">
			<div class="Nt_produce">
				<ul>
					<li>
						<i class="iconfont col_b">&#xe70d;</i>
					</li>
					<li>
						<p>
							优质经理
						</p>
					</li>
					<li>
						<router-link to="creditmanager">
							<p>更多</p>
						</router-link>
					</li>
					<li>
						<i class="iconfont">&#xe690;</i>
					</li>
				</ul>
			</div>
			<div class="manager">

				<ul class="L_manager" v-for="d in bizs">
					<li>
						<div>
							<img :src="d.img" width="100%">
						</div>
					</li>
					<li>
						<ul class="manager_content">
							<li>
								<p>{{d.name}}</p>
							</li>
							<li>
								<ul>
									<!-- 
								<li><p>利率</p></li>
								<li><p class="col-r1">0.50%-0.98%</p></li>
								<li><p>最高500万  </p></li>
                                -->
									<li v-html="d.proIntro"></li>
								</ul>
							</li>
							<li>
								<p class="col-gray" v-html="d.proType"></p>
							</li>
						</ul>
					</li>
					<li>
						<router-link tag="li" :to="{path: 'loanapplication', query: { jobNum: d.serviceNo }}"><input type="button" value="向他申请" class="apply_btn" /></router-link>
					</li>
				</ul>
			</div>
		</div>
		<div class="N_line">

		</div>
		<div class="N_produce">
			<div class="Nt_produce">
				<ul>
					<li>
						<i class="iconfont col_dr">&#xe70e;</i>
					</li>
					<li>
						<p>
							信用卡推荐
						</p>
					</li>
					<li>
						<router-link to="creditcard">
							<p>更多</p>
						</router-link>
					</li>
					<li>
						<i class="iconfont">&#xe690;</i>
					</li>
				</ul>
			</div>

			<div class="N_card">
				<router-link :to="`cardform/${cinfo.creditInfoId}`" v-for="cinfo in creditInfos" :key="cinfo.creditInfoId">
					<ul>
						<li>
							<img :src="cinfo.mainImg" alt="信用卡" width="100%;">
						</li>
						<li>
							<p v-html="cinfo.info"></p>
							
						</li>
					</ul>
				</router-link>
			</div>

		</div>
		<div style="height:1.2rem;">

		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			baseList: [],
			products: [],
			bizs: [],
			creditInfos: [],
			params: {
				page: 1,
				limit: 100
			},
			list: []

		}
	},
	created() {
		this.query()
	},
	methods: {
		changeType(types) {
			// 1:信用贷，2抵押贷3私借 4 其他
			switch (Number(types)) {
				case 1:
					return "信用贷"
				case 2:
					return "抵押贷"
				case 3:
					return "私借"
				default:
					return "其他"
			}
		},
		query() {
			this.$http.get('/app/index/carousel', {
				params: { page: 'index' }
			}).then(json => {
				const { code, carousel } = json
				if (code === 0) {
					carousel.forEach(n => {
						this.baseList.push({
							url: n.url,
							img: n.imgPath
						})
					})
				}
			})
			this.$http.get('/app/index/products').then(json => {
				const { code, products } = json
				if (code == 0) {
					this.products = products
				}
			})

			this.$http.get('/app/index/bizs', {
				params: { firstSend: 0 }
			}).then(json => {
				const { code, bizs } = json
				if (code == 0) {
					this.bizs = bizs
				}
			})
			this.$http.get('/app/index/creditInfos').then(json => {
				const { code, creditInfos } = json
				if (code == 0) {
					this.creditInfos = creditInfos
				}
			})
		}
	}

}

</script>

<style>

</style>


